<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>店铺信息</title>
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="decorator" content="default"/>

	<script type="text/javascript" src="${ctxStatic}/common/jquery-2.0.0.min.js"></script>

	<script type="text/javascript" src="${ctxStatic}/bower_components/moxie.js"></script>
	<script type="text/javascript" src="${ctxStatic}/bower_components/plupload.dev.js"></script>
	<%--<script type="text/javascript" src="/static/bower_components/plupload/js/plupload.full.min.js"></script>--%>
	<script type="text/javascript" src="${ctxStatic}/bower_components/qiniu.js"></script>
	<script type="text/javascript" src="${ctxStatic}/bower_components/licimg.js"></script>
	<script type="text/javascript" src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js"></script>
	<script type="text/javascript" src="${ctxStatic}/ckeditor/ckeditor.js"></script>
	<script type="text/javascript" src="${ctxStatic}/supcan/ajaxSet.js"></script>
	<link href="${ctxStatic}/common/mycss.css" rel="stylesheet" type="css">
	<script type="text/javascript">
		$(document).ready(function() {
			$("#inputForm").validate({
				rules:{
					communityId:{
						required:true,
						communityId:"communityId"
					},
					phone:{
						required:true,
					}
				},
				submitHandler: function(form){
					if(isok!=2){
						loading('正在提交，请稍等...');
						form.submit();
					}

				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			$.validator.addMethod("communityId",function(values,elements){
				if(values=="请选择"){
					document.getElementById("commun").innerHTML="请选择小区";
					return false;
				}/*else if(isok==2){
					document.getElementById("commun").innerHTML="该小区已有了店铺，请重新选择您店铺所在的小区！";
					return false;
				}*/else{
					document.getElementById("commun").innerHTML="*";
					return true;
				}
			},"");
		});
	</script>
	<script>
		var isok=0;
		$(function() {
			//将区域id传入后台查询小区
			$("#box").change(function() {
				var areasId = $("#box").val();
				$.ajax({
					type : "POST",
					url : "${ctx}/sys/office/showCommunityListByAreaId",
					data : {
						areasId : areasId
					},
					dataType : "JSON",
					success : function(date) {
						var str = "<option>请选择</option>";
						$("#communityId").html("");
						for ( var i = 0; i < date.length; i++) {
							str += "<option value='"+date[i].id+"'>" + date[i].name + "</option>";

						}
						$("#communityId").append(str);


					}
				});

			});
		});
		$(function() {
			//将区域id传入后台查询小区
			$("#communityId").change(function() {
				var commtyId = $("#communityId").val();
				$.ajax({
					type : "POST",
					url : "${ctx}/sys/user/checkShopByCommunit",
					data : {
						communityId : commtyId
					},
					dataType : "JSON",
					success : function(date) {
						if(date=="1"){
							document.getElementById("commun").innerHTML="该小区已有了店铺，请重新选择您店铺所在的小区！";
							isok=2;
						}else{
							document.getElementById("commun").innerHTML="*";
							isok=1;
						}
					}
				});

			});
		});
	</script>
	<script>
		$(document).ready(function () {
			$(document).on("click", "A[name='deleteImg']", function () {
				$(this).parent().remove();
			});
			//$("#value").focus();
		});
		$(document).ready(function () {
			$(document).on("click", "A[name='deleteImg1']", function () {
				$(this).parent().remove();
			});
			//$("#value").focus();
		});
		$(document).ready(function () {
			$(document).on("click", "A[name='deleteImg2']", function () {
				$(this).parent().remove();
			});
			//$("#value").focus();
		});
	</script>
	<script>
		$(function () {
			var uploader = Qiniu.uploader({
				runtimes: 'html5,flash,html4',
				browse_button: 'pickfiles',
				container: 'container',
				drop_element: 'container',
				max_file_size: '1000mb',
				flash_swf_url: 'bower_components/plupload/js/Moxie.swf',
				dragdrop: true,
				chunk_size: '4mb',
				multi_selection: !(mOxie.Env.OS.toLowerCase() === "ios"),
				// uptoken_url: '/a/qiniu/upload/token',http://localhost:8080/a/qiniu/upload/token"
				uptoken_url: '/a/qiniu/upload/token',
				domain: "oframjnn6.bkt.clouddn.com",
				get_new_uptoken: false,
				auto_start: true,
				log_level: 5,
				unique_names: true,
				init: {
					'FilesAdded': function (up, files) {
						plupload.each(files, function (file) {
						});
					},
					'BeforeUpload': function (up, file) {
					},
					'UploadProgress': function (up, file) {
						console.log(up);
					},
					'UploadComplete': function () {
					},
					'FileUploaded': function (up, file, info) {
					},
					'Error': function (up, err, errTip) {

					}
				}
			});

			uploader.bind('FileUploaded', function (up, file, info) {

				console.log("resp_URL : " + JSON.parse(info.response).key);
				var _url = 'http://oframjnn6.bkt.clouddn.com/' + JSON.parse(info.response).key;
				var _html = '<li><img src="'+_url+'" ' +
						'url="'+_url+'" ' +
						'style="max-width:100px;max-height:100px;_height:100px;border:0;padding:3px;"> ' +
						'<input type="hidden" name="shopImageUrl" value="'+_url+'"> ' +
						'&nbsp;&nbsp; ' +
						'<a href="javascript:void(0)" name="deleteImg1">×</a> ' +
						'<input type="hidden" value="'+_url+'" class="input-text form-control"/></li>';
				console.log(_html);
				$("#nameImagePreview").html(_html);
			});

		});
	</script>
	<script>
		$(function () {
			var uploader3 = Qiniu.uploader({
				runtimes: 'html5,flash,html4',
				browse_button: 'pickfiles3',
				container: 'container',
				drop_element: 'container',
				max_file_size: '1000mb',
				flash_swf_url: 'bower_components/plupload/js/Moxie.swf',
				dragdrop: true,
				chunk_size: '4mb',
				multi_selection: !(mOxie.Env.OS.toLowerCase() === "ios"),
				// uptoken_url: '/a/qiniu/upload/token',http://localhost:8080/a/qiniu/upload/token"
				uptoken_url: '/a/qiniu/upload/token',
				domain: "oframjnn6.bkt.clouddn.com",
				get_new_uptoken: false,
				auto_start: true,
				log_level: 5,
				unique_names: true,
				init: {
					'FilesAdded': function (up, files) {
						plupload.each(files, function (file) {
						});
					},
					'BeforeUpload': function (up, file) {
					},
					'UploadProgress': function (up, file) {
						console.log(up);
					},
					'UploadComplete': function () {
					},
					'FileUploaded': function (up, file, info) {
					},
					'Error': function (up, err, errTip) {

					}
				}
			});

			uploader3.bind('FileUploaded', function (up, file, info) {

				console.log("resp_URL : " + JSON.parse(info.response).key);
				var _url = 'http://oframjnn6.bkt.clouddn.com/' + JSON.parse(info.response).key;
				var _html = '<li><img src="'+_url+'" ' +
						'url="'+_url+'" ' +
						'style="max-width:100px;max-height:100px;_height:100px;border:0;padding:3px;"> ' +
						'<input type="hidden" name="adressDetail" value="'+_url+'"> ' +
						'&nbsp;&nbsp; ' +
						'<a href="javascript:void(0)" name="deleteImg2">×</a> ' +
						'<input type="hidden" value="'+_url+'" class="input-text form-control"/></li>';
				console.log(_html);
				$("#dianpu").html(_html);
			});

		});
	</script>

</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/sys/user/storeInfo">店铺信息</a></li>
		<li><a href="${ctx}/sys/user/modifyPackingFee">修改配送费</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="shop" action="${ctx}/sys/user/saveStoreInfo" method="post" class="form-horizontal" enctype="multipart/form-data"><%--
		<form:hidden path="email" htmlEscape="false" maxlength="255" class="input-xlarge"/>
		<sys:ckfinder input="email" type="files" uploadPath="/mytask" selectMultiple="false"/> --%>
		<sys:message content="${message}"/>
		<div class="control-group">
			<label class="control-label">区域名称:</label>
			<div class="controls">
					<span><!--${user.areas}-->
						<select id="box" name="areas" class="input-medium">
							<option>请选择</option>
							<c:forEach items="${areasList}" var="areas">
								<c:choose>
									<c:when test="${community.areaId eq areas.areaid}">
										<option  value="${areas.areaid}" selected >${areas.area}</option>
									</c:when>
									<c:when test="${shop.id==2}">
										<option  value="333333" selected >全国</option>
									</c:when>
									<c:otherwise>
										<option  value="${areas.areaid}" >${areas.area}</option>
									</c:otherwise>
								</c:choose>

							</c:forEach>
						</select>
					</span>
				&nbsp;&nbsp;
            <span>
				<select id="communityId" name='communityId' class="input-medium">
					<c:choose>
						<c:when test="${shop.id!=null&&shop.id!=2}"><option value="${community.id}" selected>${community.commName}</option></c:when>
						<c:when test="${shop.id==2}">	<option value="0" selected>全国</option></c:when>
						<c:otherwise><option >请选择</option></c:otherwise>
					</c:choose>
				</select>
			</span>
				<span class="help-inline"><font color="red" id="commun">*</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">店铺名称:</label>
			<div class="controls">
				<form:input path="name" htmlEscape="false" maxlength="50" class="required" />
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label id="container" class="control-label"><a class="btn btn-default btn-lg " id="pickfiles" href="#">
				<i class="glyphicon glyphicon-plus"></i>
				<span>店铺照片</span>
			</a>:</label>
			<div class="controls">
				<ol id="nameImagePreview">
					<c:if test="${shop.shopImageUrl!=null}">
						<li><img src="${shop.shopImageUrl}"
								 url="${shop.shopImageUrl}"
								 style="max-width:100px;max-height:100px;_height:100px;border:0;padding:3px;">
							<input type="hidden" name="shopImageUrl" value="${shop.shopImageUrl}">
							<a href="javascript:void(0)" name="deleteImg">删除</a>
						</li>
					</c:if>
				</ol>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label">店铺地址:</label>
			<div class="controls">
				<form:input path="adress" htmlEscape="false" maxlength="50" class="required" />
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label id="container1" class="control-label"><a class="btn btn-default btn-lg " id="pickfiles1" href="#">
				<i class="glyphicon glyphicon-plus"></i>
				<span>营业执照</span>
			</a>:</label>
			<div class="controls">
				<ol id="nameImagePreview1">
					<c:if test="${shop.businessLicenseImageUrl!=null}">
						<li><img src="${shop.businessLicenseImageUrl}"
								 url="${shop.businessLicenseImageUrl}"
								 style="max-width:100px;max-height:100px;_height:100px;border:0;padding:3px;">
							<input type="hidden" name="businessLicenseImageUrl" value="${shop.businessLicenseImageUrl}">
							<a href="javascript:void(0)" name="deleteImg1">删除</a>
						</li>
					</c:if>
				</ol>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">联系方式:</label>
			<div class="controls">
				<form:input path="phone" id="phone" htmlEscape="false" maxlength="50" class="phone" />
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">营业状态:</label>
			<c:choose>
				<c:when test="${shop.status==null}">
					<div class="controls">
						<label class="lbl">停业</label>
					</div>
				</c:when>
				<c:otherwise>
					<c:if test="${shop.status==0}">
						<div class="controls">
							<label class="lbl">开业</label>
						</div>
					</c:if>
					<c:if test="${shop.status==1}">
						<div class="controls">
							<label class="lbl">停业</label>
						</div>
					</c:if>
				</c:otherwise>
			</c:choose>
           <%-- <c:if test="${shop.status==0}">
                <div class="controls">
                    <label class="lbl">开业</label>
                </div>
            </c:if>
            <c:if test="${shop.status==1}">
                <div class="controls">
                    <label class="lbl">停业</label>
                </div>
            </c:if>--%>
		</div>
		<div class="control-group">
			<label class="control-label">店铺描述:</label>
			<div class="controls">
				<form:textarea path="bz" htmlEscape="false" maxlength="200" />
			</div>
			<%--<div class="controls">${shop.bz}
				<form:textarea path="remarks" htmlEscape="false" value="${shop.bz}" rows="3" maxlength="200" class="input-xlarge"/>
			</div>--%>
		</div>
		<div class="control-group">
			<label id="container3" class="control-label"><a class="btn btn-default btn-lg " id="pickfiles3" href="#">
				<i class="glyphicon glyphicon-plus"></i>
				<span>店铺地址图片</span>
			</a>:</label>
			<div class="controls">
				<ol id="dianpu">
					<c:if test="${shop.adressDetail!=null}">
						<li><img src="${shop.adressDetail}"
								 url="${shop.adressDetail}"
								 style="max-width:100px;max-height:100px;_height:100px;border:0;padding:3px;">
							<input type="hidden" name="adressDetail" value="${shop.adressDetail}">
							<a href="javascript:void(0)" name="deleteImg2">删除</a>
						</li>
					</c:if>
				</ol>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		<div class="form-actions">
			<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>
		</div>
	</form:form>
</body>
</html>